import 'package:flutter/material.dart' hide SearchController;
import 'package:get/get.dart';
import 'package:shop/app/routes/app_pages.dart';
import 'package:shop/tools/searchServices.dart';

import '../../../../tools/httpsClient.dart';
import '../../../../tools/screenAdapter.dart';
import '../controllers/search_controller.dart';

class SearchView extends GetView<SearchController> {
  const SearchView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(246, 246, 246, 1),
      appBar: AppBar(
        title: Container(
          width: ScreenAdapter.width(840),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
            color: const Color.fromRGBO(246, 246, 246, 1),
            borderRadius: BorderRadius.circular(30),
          ),
          child: TextField(
            autofocus: true,
            style: TextStyle(
              // 修改内容字体
              fontSize: ScreenAdapter.fontSize(36),
            ),
            decoration: InputDecoration(
              // 修改input外观
              contentPadding: EdgeInsets.all(0),
              prefixIcon: Icon(Icons.search),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: BorderSide.none,
              ),
            ),
            onChanged: (value) {
              controller.keyWords = value;
            },
            onSubmitted: (value) {
              // 保存搜索记录
              SearchServices.setHistoryData(value);
              Get.offAndToNamed(
                Routes.PRODUCT_LIST,
                arguments: {"keyWords": controller.keyWords},
              );
            },
          ),
        ),
        centerTitle: true,
        actions: [
          TextButton(
            onPressed: () {
              // 保存搜索记录
              SearchServices.setHistoryData(controller.keyWords);
              // 替换路由
              Get.offAndToNamed(
                Routes.PRODUCT_LIST,
                arguments: {"keyWords": controller.keyWords},
              );
            },
            child: Text(
              '搜索',
              style: TextStyle(
                color: Colors.black87,
                fontSize: ScreenAdapter.fontSize(36),
              ),
            ),
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: 1,
        padding: EdgeInsets.all(ScreenAdapter.height(20)),
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Obx(
                () => controller.searchHistoryList.isNotEmpty
                    ? Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '搜索历史',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: ScreenAdapter.fontSize(42),
                            ),
                          ),
                          IconButton(
                            onPressed: () {
                              // 底部弹窗
                              Get.bottomSheet(
                                Container(
                                  padding: EdgeInsets.all(
                                    ScreenAdapter.width(20),
                                  ),
                                  color: Colors.white,
                                  width: ScreenAdapter.width(1080),
                                  height: ScreenAdapter.height(400),
                                  child: Column(
                                    children: [
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Text(
                                            '您确定要清空历史记录吗？',
                                            style: TextStyle(
                                              fontSize: ScreenAdapter.fontSize(
                                                48,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                      SizedBox(height: 30),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceAround,
                                        children: [
                                          Container(
                                            width: ScreenAdapter.width(360),
                                            child: ElevatedButton(
                                              style: ButtonStyle(
                                                backgroundColor:
                                                    WidgetStatePropertyAll(
                                                      Color.fromRGBO(
                                                        236,
                                                        236,
                                                        236,
                                                        1,
                                                      ),
                                                    ),
                                              ),
                                              onPressed: () {
                                                Get.back();
                                              },
                                              child: Text('取消'),
                                            ),
                                          ),
                                          Container(
                                            width: ScreenAdapter.width(360),
                                            child: ElevatedButton(
                                              style: ButtonStyle(
                                                backgroundColor:
                                                    WidgetStatePropertyAll(
                                                      Colors.blue,
                                                    ),
                                              ),
                                              onPressed: () {
                                                controller
                                                    .clearSearchHistoryData();
                                                Get.back();
                                              },
                                              child: Text(
                                                '确定',
                                                style: TextStyle(
                                                  color: Colors.white,
                                                ),
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                            icon: Icon(Icons.delete_forever_outlined),
                          ),
                        ],
                      )
                    : const Text(''),
              ),
              Container(
                alignment: Alignment.topLeft,
                child: Obx(
                  () => Wrap(
                    children: controller.searchHistoryList.map((value) {
                      return GestureDetector(
                        onLongPress: () {
                          Get.defaultDialog(
                            title: '提示信息！',
                            middleText: '您确定要删除吗？',
                            confirm: ElevatedButton(
                              onPressed: () {
                                controller.deleteSearchHistoryData(value);
                                Get.back();
                              },
                              child: Text('确定'),
                            ),
                            cancel: ElevatedButton(
                              onPressed: () {
                                Get.back();
                              },
                              child: Text('取消'),
                            ),
                          );
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(10),
                          ),
                          padding: EdgeInsets.fromLTRB(
                            ScreenAdapter.width(32),
                            ScreenAdapter.width(16),
                            ScreenAdapter.width(32),
                            ScreenAdapter.width(16),
                          ),
                          margin: EdgeInsets.all(ScreenAdapter.height(16)),
                          child: Text(value),
                        ),
                      );
                    }).toList(),
                  ),
                ),
              ),
              SizedBox(
                height: controller.searchHistoryList.isNotEmpty ? 20 : 0,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '猜你想搜',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: ScreenAdapter.fontSize(42),
                    ),
                  ),
                  Icon(Icons.refresh),
                ],
              ),
              Container(
                alignment: Alignment.topLeft,
                child: Wrap(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      padding: EdgeInsets.fromLTRB(
                        ScreenAdapter.width(32),
                        ScreenAdapter.width(16),
                        ScreenAdapter.width(32),
                        ScreenAdapter.width(16),
                      ),
                      margin: EdgeInsets.all(ScreenAdapter.height(16)),
                      child: Text('手机'),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: controller.searchHistoryList.isNotEmpty ? 20 : 0,
              ),
              //   热销组件
              Container(
                decoration: BoxDecoration(
                  // color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Column(
                  children: [
                    Container(
                      width: double.infinity,
                      height: ScreenAdapter.height(138),
                      decoration: const BoxDecoration(
                        color: Colors.white,
                        image: DecorationImage(
                          fit: BoxFit.cover,
                          image: AssetImage('assets/images/hot_search.png'),
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(ScreenAdapter.width(20)),
                      child: GridView.builder(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        // 禁用自身滚动
                        itemCount: 22,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          mainAxisSpacing: ScreenAdapter.height(20),
                          crossAxisSpacing: ScreenAdapter.width(40),
                          childAspectRatio: 3 / 1,
                        ),
                        itemBuilder: (context, index) {
                          return Row(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                width: ScreenAdapter.width(120),
                                padding: EdgeInsets.all(
                                  ScreenAdapter.width(10),
                                ),
                                child: Image.network(
                                  HttpsClient.photoUrl(
                                    'public/upload/0AY3Cpw19ZQ2AkYjbA1tQY-Z.png_200x200.png',
                                  ),
                                  fit: BoxFit.fitHeight,
                                ),
                              ),
                              Expanded(
                                child: Container(
                                  padding: EdgeInsets.all(
                                    ScreenAdapter.width(20),
                                  ),
                                  child: Text('小米净化器 人水汽 小米净化器'),
                                ),
                              ),
                            ],
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}
